<template>
  <div class="dashboard" id="dashboard">
    <div class="content">
      <div class="left-box">
        <equipments></equipments>
        <echartLearn></echartLearn>
        <risk></risk>
        <ranks></ranks>
        <echartInternet></echartInternet>
      </div>
      <div class="mid-box">
        <gdMap></gdMap>
        <lines></lines>
        <echartReform></echartReform>
      </div>
      <div class="right-box">
        <duty></duty>

        <echartInspect></echartInspect>
        <safeMarks></safeMarks>
      </div>
    </div>
    <div class="header">
      <alarm></alarm>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onBeforeUnmount, onMounted } from 'vue'
import autofit from 'autofit.js'
import equipments from './components/equipments/index.vue'
import gdMap from './components/gdMap.vue'
import alarm from './components/alarm/index.vue'
import ranks from './components/ranks/index.vue'
import duty from './components/duty.vue'
import risk from './components/risk/index.vue'
import safeMarks from './components/safeMarks/safeMarks.vue'
import lines from './components/lines/index.vue'
import echartLearn from './components/echartLearn.vue'
import echartInspect from './components/echartInspect.vue'
import echartReform from './components/echartReform.vue'
import echartInternet from './components/echartInternet.vue'

onMounted(autofit.init)
onBeforeUnmount(autofit.off)
</script>

<style lang="scss" scoped>
.dashboard {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background-color: #121c2b;
  background: url('../../assets/images/bg.png') no-repeat;
  background-size: 100% 100%;
  .content {
    display: flex;
    height: 96%;
    .left-box {
      flex: 3;
      display: flex;
      flex-wrap: wrap;
      & > div:nth-child(1) {
        width: 50%;
        height: 30%;
      }
      & > div:nth-child(2) {
        width: 50%;
        height: 30%;
      }
      & > div:nth-child(3) {
        height: 30%;
      }
      & > div:nth-child(4) {
        width: 50%;
        height: 40%;
      }
      & > div:nth-child(5) {
        width: 50%;
        height: 40%;
      }
    }
    .mid-box {
      flex: 4;
      display: flex;
      flex-wrap: wrap;
      & > div:nth-child(1) {
        width: 100%;
        height: 60%;
      }
      & > div:nth-child(2) {
        width: 50%;
        height: 40%;
      }
      & > div:nth-child(3) {
        width: 50%;
        height: 40%;
      }
    }
    .right-box {
      flex: 3;
      & > div:nth-child(1) {
        height: 30%;
      }
      & > div:nth-child(2) {
        height: 30% !important;
      }
      & > div:nth-child(3) {
        height: 40% !important;
      }
    }
  }
  .header {
    display: flex;
    height: 4%;
    flex-shrink: 0;
  }
}
</style>
